<!--<template>
  <div class="insp">
    <div class="insp-total">
      <div class="insp-total-left">
        <div class="insp-total-top">
          <div class="insp-total-middle">
            <CardContainer headerName="本月病害处理状态统计">
              <template slot="card-content">
                <div id="typeAnalysis" class="insp-total-typeAnalysis"></div>
              </template>
            </CardContainer>
          </div>
          <div class="insp-total-middle">
            <CardContainer headerName="本月巡检总数分析">
              <template slot="card-content">
                <div id="sum" class="insp-total-sum"></div>
              </template>
            </CardContainer>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
  import CardContainer from "@/views/healthMonitor/components/CardContainer";
  import TimeLine from "../../inspection/components/timeLine";
  import echarts from "echarts";
  import moment from "moment";
  import VuePerfectScrollbar from "vue-perfect-scrollbar";
  export default {
    data() {
      return {
        value: new Date(),
        day: '',
        key: '',
        startDate: '',
        endDate: '',
        taskId: null,
        tableHeight: 0,
        typeAnalysis: '',
        sum: '',
        calendarData: {},
        inspTypeData: [],
        totalData: {},
        status: 0,
        info: [{
          key: 'name',
          label: '任务名称'
        }, {
          key: 'createType',
          label: '任务类型'
        }, {
          key: 'inspType',
          label: '巡检类型'
        }, {
          key: 'createUserNmae',
          label: '创建人'
        }, {
          key: 'staFlag',
          label: '执行状态'
        }],
        obj: {},
        tableData: [],
        settings: {
          // perfectscrollbar settings
          maxScrollbarLength: 30,
          wheelSpeed: 1,
          swipeEasing: true,
        },
      }
    },
    components: {
      CardContainer,
      TimeLine,
      VuePerfectScrollbar
    },
    watch: {
      value: function (val) {
        const _date = val;
        let _month = _date.getMonth();
        let _year = _date.getFullYear();
        let _startDate = new Date(_year, _month, 1);
        let _endDate = new Date(_year, _month + 1, 0);
        this.startDate = moment(_startDate).format("YYYY-MM-DD HH:mm:ss");
        this.endDate = moment(_endDate).format("YYYY-MM-DD HH:mm:ss");
        let _day = parseInt(_date.getDate());
        this.day = _day > 0 && _day < 10 ? `0${_day}` : `${_day}`;
        this.key = (_month + 1) > 0 && (_month + 1) < 10 ? `0${_month+1}` : `${_month+1}`;

        this.queryCalendar();
        this.queryTaskTotal();
        this.queryTypeTotal();

      }
    },
    created() {
      let _date = this.value;
      let _month = _date.getMonth();
      let _year = _date.getFullYear();
      let _startDate = new Date(_year, _month, 1);
      let _endDate = new Date(_year, _month + 1, 0);
      this.startDate = moment(_startDate).format("YYYY-MM-DD HH:mm:ss");
      this.endDate = moment(_endDate).format("YYYY-MM-DD HH:mm:ss");
      let _day = parseInt(_date.getDate());
      this.day = _day > 0 && _day < 10 ? `0${_day}` : `${_day}`;
      this.key = (_month + 1) > 0 && (_month + 1) < 10 ? `0${_month+1}` : `${_month+1}`;

      console.log(this.startDate);


      this.queryCalendar();
      this.queryTaskTotal();
      this.queryTypeTotal();

    },
    mounted() {
      // 监听窗口变化
      window.addEventListener("resize", () => {
        this.typeAnalysis.resize();
        this.sum.resize();
        this.$nextTick(() => {
          this.$refs.calendar.$el.style.width = this.$refs.calendarDiv.offsetWidth + 'px';
          if (this.taskId) {
            this.tableHeight = this.$refs.tableDiv.offsetHeight + 'px';
          }
        });
      });
      this.$nextTick(() => {
        this.$refs.calendar.$el.style.width = this.$refs.calendarDiv.offsetWidth + 'px';
        if (this.taskId) {
          this.tableHeight = this.$refs.tableDiv.offsetHeight + 'px';
        }
      });
    },
    activated() {
      let _date = this.value;
      let _month = _date.getMonth();
      let _year = _date.getFullYear();
      let _startDate = new Date(_year, _month, 1);
      let _endDate = new Date(_year, _month + 1, 0);
      this.startDate = moment(_startDate).format("YYYY-MM-DD HH:mm:ss");
      this.endDate = moment(_endDate).format("YYYY-MM-DD HH:mm:ss");
      let _day = parseInt(_date.getDate());
      this.day = _day > 0 && _day < 10 ? `0${_day}` : `${_day}`;
      this.key = (_month + 1) > 0 && (_month + 1) < 10 ? `0${_month+1}` : `${_month+1}`;


      this.queryCalendar();
      this.queryTaskTotal();
      this.queryTypeTotal();
    },
    methods: {
      drawTypeAnalysis() {
        let _data = this.inspTypeData;
        const _obj = this.arrayToObj(_data, 'name');
        this.typeAnalysis = new echarts.init(document.getElementById("typeAnalysis"));
        this.typeAnalysis.setOption({
          legend: {
            orient: "vertical",
            top: "center",
            right: "6%",
            data: ["待养护", "养护中", "已处理"],
            itemWidth: 12,
            itemHeight: 10,
            itemGap: 15,
            formatter: (name) => {
              return `${name}  ${_obj[name]['value']}%`;
            },
          },
          tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b} : {d}%",
          },
          color: ['#FF9F43', '#56D38D', '#7467F0', '#FBE033'],
          series: [{
            name: "病害处理状态统计",
            type: "pie",
            radius: ["50%", "70%"],
            center: ["30%", "52%"],
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            data: _data
          }],
        });
      },
      drawSum() {
        let _data = this.totalData || [];
        this.sum = new echarts.init(document.getElementById("sum"));
        this.sum.setOption({
          color: ['#FF9F43', '#7467F0', '#56D38D', '#FBE033'],
          tooltip: {
            trigger: 'item',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            data: ['日常巡检', '定期巡检'],//, '特殊巡检'
            right: 2,
            top: 15,
            textStyle: {
              color: "#666666"
            },
            itemWidth: 10,
            itemHeight: 10,
            itemGap: 35
          },
          grid: {
            left: '3%',
            right: '3%',
            bottom: '20px',
            containLabel: true
          },
          xAxis: [{
            type: 'category',
            data: _data['xAxis'] || [],
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "#ccc",
              }
            },
          }],
          yAxis: [{
            type: 'value',
            axisLabel: {
              show: true,
              textStyle: {
                color: "#ccc",
              }
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            splitLine: {
              show: false
            }
          }],
          series: this.totalData.map(item => ({
            name: item['name'] || '',
            type: 'bar',
            data: [item['value']] || [],
            barWidth: 10
          }))
        });
      },
      arrayToObj(arr, key) {
        let _obj = {};
        arr.forEach((item) => {
          _obj[item[key]] = item;
        })
        return _obj
      },
      queryCalendar() {
        this.$api.curing.queryTaskByDate({
          time: this.startDate
        }).then(response => {
          if (response.data.success) {
            let _obj = response.data.data;
            let _newObj = {};

            Object.keys(_obj).forEach(key => {
              let _key = '';
              if (parseInt(key) > 0 && parseInt(key) < 10) {
                _key = `0${key}`;
              } else {
                _key = `${key}`;
              }
              _newObj[_key] = _obj[key];
            });
            this.calendarData = _newObj;
            if (_newObj[this.day] && _newObj[this.day].length > 0) {
              this.taskId = _newObj[this.day][0]['id'];
              this.queryTaskById(this.taskId);
            } else {
              this.taskId = null;
            }

            this.$nextTick(() => {
              this.$refs.calendar.$el.style.width = this.$refs.calendarDiv.offsetWidth + 'px';
            });

          }
        });
      },
      queryTaskTotal() {
        this.$api.curing.queryTaskTotal({
          time: this.startDate
        }).then(response => {
          if (response.data.success) {
            this.totalData = response.data.data || [];
            this.drawSum();
          }
        })
      },
      queryTypeTotal() {
        this.$api.curing.queryTypeTotal({
          time: this.startDate
        }).then(response => {
          if (response.data.success) {
            this.inspTypeData = response.data.data || [];
            this.drawTypeAnalysis();
          }
        })
      },
      queryTaskById(val) {
        this.$api.insp.queryTaskById(val).then(response => {
          if (response.data.success) {
            this.status = response.data.data['staFlag'];
            this.obj = response.data.data;
            this.tableData = response.data.data['itemList'] || [];
            this.$nextTick(() => {
              this.tableHeight = this.$refs.tableDiv.offsetHeight + 'px';
            });
          }
        });
      },
      handleClickTask(val, e) {
        e = event || window.event;
        e.stopPropagation();
        this.taskId = val;
        this.queryTaskById(val);
      },
      statusText(type) {
        switch (type) {
          case 0:
            return "计划中";
          case 1:
            return "进行中";
          case 2:
            return "已结束";
          default:
            return '';
        }
      },
      inspPersonText(list) {
        let _text = '';
        list.forEach((item, index) => {
          if (!index) {
            _text += item.userName
          } else {
            _text += `、${item.userName}`
          }
        });
        return _text;
      },
      inspStandardText(type) {
        switch (type) {
          case 0:
            return '城市桥梁';
          case 1:
            return '道路桥梁';
        }
      },
      taskTypeText(type) {
        switch (type) {
          case 1:
            return '模板任务';
          case 2:
            return '定时任务';
          case 3:
            return '快速任务';
          case 4:
            return '临时任务';
        }
      },
      inspTypeText(type) {
        switch (type) {
          case 0:
            return '日常巡检';
          case 1:
            return '定期巡检';
          case 2:
            return '特殊巡检';
        }
      },
    }
  };

</script>
<style scoped lang="scss">
  @import './insp.scss';

  /deep/.el-table__header tr,
  /deep/.el-table__header th {
    padding: 0;
    height: 44px;
  }

  /deep/.el-table td,
  /deep/.el-table th {
    text-align: center;
    font-size: 14px;
  }

  /deep/.el-table td {
    font-weight: 400;
    color: #333;
    padding: 0;
    height: 44px;
    line-height: 44px;
  }

  /deep/.el-table&#45;&#45;striped .el-table__body tr.el-table__row&#45;&#45;striped td {
    background: #fff;
  }

  /deep/.el-calendar {
    width: 100%;
    height: 100%;
  }

  /deep/.el-calendar-table {
    border-collapse: separate;
    border-spacing: 2px 2px;
    width: 100%;
    height: 100%;
    background: #fff;
  }

  /deep/.el-calendar-table thead th {
    padding: 3px 0;
    font-weight: 500;
    text-align: center;
    color: #8998AC;
    background: #EDF0F5;
    border-radius: 2px;
    line-height: 30px;
  }

  /deep/.el-calendar__body {
    padding: 5px 10px;
  }

  /deep/.el-calendar-table tr td {
    border: 1px solid #EBEEF5 !important;
  }

  /deep/.el-calendar__body {
    height: calc(100% - 53px);
  }

  /deep/.el-calendar-table tbody {
    height: calc(100% - 50px);
  }

  /deep/.el-calendar-table tbody td {
    height: calc(100% / 6) !important;
  }

  /deep/.el-calendar-table .el-calendar-day {
    padding: 4px 8px 0;
    height: 100% !important;
  }

  .insp-calendar-slot {
    height: 100% !important;
    position: relative;
  }

  /deep/.el-calendar-table .el-calendar-day p {
    text-align: left;
  }

  /deep/.el-calendar-table td.is-today {
    .insp-calendar-day {
      display: inline-block;
      width: 21px;
      height: 21px;
      background: linear-gradient(295deg, #74BBF0 0%, #327BDC 100%);
      color: #fff;
      border-radius: 50%;
      line-height: 21px;
      text-align: center;
    }
  }

  /deep/.el-calendar-table td.is-selected {
    .insp-calendar-day {
      display: inline-block;
      width: 21px;
      height: 21px;
      background: linear-gradient(295deg, #74BBF0 0%, #327BDC 100%);
      color: #fff;
      border-radius: 50%;
      line-height: 21px;
      text-align: center;
    }
  }

  .insp-calendar-task {
    display: inline-block;
    position: absolute;
    bottom: 4px;
    left: 0;
    padding-left: 8px;
    line-height: 26px;
    font-size: 12px;
    width: 100%;
    height: 26px;
    box-shadow: 0px 0px 4px 0px rgba(116, 103, 240, 0.2);
    border-radius: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
  }


  .insp-calendar-more {
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    font-size: 14px;
    font-weight: bolder;
    line-height: 21px;
    cursor: pointer;
    color: #327BDC;
  }

  .insp-calendar-moreDIV {
    display: block;
    position: absolute;
    bottom: 0;
    right: -160px;
    width: 150px;
    height: 190px;
    z-index: 100;
    background: #fff;
    box-shadow: 0px 0px 5px 0px rgba(50, 123, 220, 0.4);
    border-radius: 4px;

    h4 {
      font-size: 13px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #8998AC;
      line-height: 30px;
      text-align: center;
      border-bottom: 1px solid #f7f7f7;
    }

    .insp-calendar-taskBox {
      height: 200px;
      overflow-y: auto;
    }

    .insp-calendar-taskDiv {
      display: block;
      margin-left: 8px;
      padding-left: 8px;
      margin-top: 5px;
      line-height: 26px;
      font-size: 12px;
      width: 126px;
      height: 26px;
      box-shadow: 0px 0px 4px 0px rgba(116, 103, 240, 0.2);
      border-radius: 2px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      cursor: pointer;
    }
  }

  .purple {
    background: #E6E3FD;
    border-left: 3px solid #7467F0;
    color: #7467F0;
  }

  .green {
    background: #E7FAEF;
    border-left: 3px solid #2AC770;
    color: #2AC770;
  }

  .orange {
    background: #FEE7D0;
    border-left: 3px solid #FF9F43;
    color: #FF9F43;
  }

  .insp-calendar-none {
    display: none;
  }

  .scroller {
    width: 100%;
    height: 100%;
  }

</style>-->
<template>
  <div class="insp">
    <div class="insp-header">
      <div class="flexBetween">
        <div class="flex insp-header-left">
          <el-select v-model="bridgeValue" placeholder="请选择部门" size="small" style="width: 180px;" class="mRight10"
                     clearable>
            <el-option v-for="item in bridgeOptsAll" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
          <el-select v-model="bridgeValue" placeholder="请选择人员" size="small" style="width: 180px;" class="mRight10"
                     clearable>
            <el-option v-for="item in bridgeOptsAll" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
          <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss" style="width:200px;"
                          v-model="taskTime" type="datetime" size="small" placeholder="请选择时间" class="mRight10" clearable>
          </el-date-picker>
          <el-button type="primary" size="small" @click="queryForPage(1)">
            查询
          </el-button>
          <el-button type="primary" size="small" @click="queryForPage(1)">
            导出
          </el-button>
        </div>
      </div>
    </div>

    <div class="insp-content">
      <div class="evaluate-top">
       <div class="evaluate-top-left">
         <CardContainer headerName="巡检考核">
           <template slot="card-content">
             <div class='chart1' id='chart1'></div>
           </template>
         </CardContainer>
       </div>
        <div class="evaluate-top-middle">
          <CardContainer headerName="养护考核">
            <template slot="card-content">
              <div class='chart2' id='chart2'></div>
            </template>
          </CardContainer>
        </div>
       <div class="evaluate-top-right">
         <CardContainer headerName="日程考核">
           <template slot="card-content">
             <div class='chart3' id='chart3'></div>
           </template>
         </CardContainer>
       </div>
     </div>
      <div class="evaluate-bottom">
        <div class="evaluate-top-left">
          <CardContainer headerName="状态考核">
            <template slot="card-content">
              <div class='chart4' id='chart4'></div>
            </template>
          </CardContainer>
        </div>
        <div class="evaluate-top-right">
          <CardContainer headerName="列位率考核">
            <template slot="card-content">
              <div class='chart5' id='chart5'></div>
            </template>
          </CardContainer>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import CardContainer from "@/views/healthMonitor/components/CardContainer";
  import echarts from "echarts";
  export default {
    mounted() {
      this.Chart1 ()
      this.Chart2 ()
      this.Chart3 ()
      this.Chart4 ()
      this.Chart5 ()
    },
    methods: {
      Chart1 () {
        this.chart1 = new echarts.init(document.getElementById('chart1'))
        this.chart1.setOption({
          grid: {
            left: '5%',
            right: '5%',
            bottom: '5%',
            top: '10%',
            containLabel: true
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'none'
            },

          },
          backgroundColor: '#fff',
          xAxis: {
            show: false,
            type: 'value'
          },
          yAxis: [{
            type: 'category',
            inverse: true,
            axisLabel: {
              show: true,
              textStyle: {
                color: 'black'
              },
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            data: ['王浩', '严斌', '陆建军', '顾娟','黄张宇','单俊君']
          }, {
            type: 'category',
            inverse: true,
            axisTick: 'none',
            axisLine: 'none',
            show: true,
            axisLabel: {
              textStyle: {
                color: 'black',
                fontSize: '12'
              },
              formatter: function(value) {

                return value + '条'

              },
            },
            data: [12, 9, 7, 5,3,1]
          }],
          series: [{
            type: 'bar',
            zlevel: 1,
            itemStyle: {
              normal: {
                barBorderRadius: 30,
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                  offset: 0,
                  color: 'white'
                }, {
                  offset: 1,
                  color: 'rgb(46,200,207,1)'
                }]),
              },
            },
            barWidth: 20,
            data: [12, 9, 7, 5,3,1]
          },

          ]
        });
      },
      Chart2 () {
        this.chart2 = new echarts.init(document.getElementById('chart2'))
        this.chart2.setOption({
          grid: {
            left: '5%',
            right: '5%',
            bottom: '5%',
            top: '10%',
            containLabel: true
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'none'
            },

          },
          backgroundColor: '#fff',
          xAxis: {
            show: false,
            type: 'value'
          },
          yAxis: [{
            type: 'category',
            inverse: true,
            axisLabel: {
              show: true,
              textStyle: {
                color: 'black'
              },
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            data: ['姜建平', '严斌', '陆建军', '顾娟','黄张宇','单俊君']
          }, {
            type: 'category',
            inverse: true,
            axisTick: 'none',
            axisLine: 'none',
            show: true,
            axisLabel: {
              textStyle: {
                color: 'black',
                fontSize: '12'
              },
              formatter: function(value) {

                return value + '条'

              },
            },
            data: [12, 9, 7, 5,3,1]
          }],
          series: [{
            type: 'bar',
            zlevel: 1,
            itemStyle: {
              normal: {
                barBorderRadius: 30,
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                  offset: 0,
                  color: 'white'
                }, {
                  offset: 1,
                  color: 'rgb(255,165,0)'
                }]),
              },
            },
            barWidth: 20,
            data: [12, 9, 7, 5,3,1]
          },

          ]
        });
      },
      Chart3 () {
        this.chart3 = new echarts.init(document.getElementById('chart3'))
        this.chart3.setOption({
          grid: {
            left: '5%',
            right: '5%',
            bottom: '5%',
            top: '10%',
            containLabel: true
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'none'
            },

          },
          backgroundColor: '#fff',
          xAxis: {
            show: false,
            type: 'value'
          },
          yAxis: [{
            type: 'category',
            inverse: true,
            axisLabel: {
              show: true,
              textStyle: {
                color: 'black'
              },
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            data: ['王浩', '严斌', '陆建军', '顾娟','黄张宇','单俊君']
          }, {
            type: 'category',
            inverse: true,
            axisTick: 'none',
            axisLine: 'none',
            show: true,
            axisLabel: {
              textStyle: {
                color: 'black',
                fontSize: '12'
              },
              formatter: function(value) {

                return value + 'km'

              },
            },
            data: [12, 9, 7, 5,3,1]
          }],
          series: [{
            type: 'bar',
            zlevel: 1,
            itemStyle: {
              normal: {
                barBorderRadius: 30,
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                  offset: 0,
                  color: 'white'
                }, {
                  offset: 1,
                  color: 'rgb(60,179,133)'
                }]),
              },
            },
            barWidth: 20,
            data: [12, 9, 7, 5,3,1]
          },

          ]
        });
      },
      Chart4 () {
        this.chart4 = new echarts.init(document.getElementById('chart4'))
        this.chart4.setOption({
          grid: {
            left: '5%',
            right: '5%',
            bottom: '5%',
            top: '10%',
            containLabel: true
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'none'
            },

          },
          backgroundColor: '#fff',
          xAxis: {
            show: false,
            type: 'value'
          },
          yAxis: [{
            type: 'category',
            inverse: true,
            axisLabel: {
              show: true,
              textStyle: {
                color: 'black'
              },
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            data: ['王浩', '严斌', '陆建军', '顾娟','黄张宇','单俊君']
          }, {
            type: 'category',
            inverse: true,
            axisTick: 'none',
            axisLine: 'none',
            show: true,
            axisLabel: {
              textStyle: {
                color: 'black',
                fontSize: '12'
              },
              formatter: function(value) {

                return value + 'km/h'

              },
            },
            data: [12, 9, 7, 5,3,1]
          }],
          series: [{
            type: 'bar',
            zlevel: 1,
            itemStyle: {
              normal: {
                barBorderRadius: 30,
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                  offset: 0,
                  color: 'white'
                }, {
                  offset: 1,
                  color: '#00aaff'
                }]),
              },
            },
            barWidth: 20,
            data: [12, 9, 7, 5,3,1]
          },

          ]
        });
      },
      Chart5 () {
        this.chart5 = new echarts.init(document.getElementById('chart5'))
        var data = [{
          "name": "王浩",
          "value": 81
        }, {
          "name": "姜建平",
          "value": 84.8
        }, {
          "name": "严斌",
          "value": 71
        }, {
          "name": "陆建军",
          "value": 82
        }, {
          "name": "顾娟",
          "value": 66
        }, {
          "name": "黄张宇",
          "value": 89
        }, {
          "name": "单俊君",
          "value": 90
        }];
        var xData = [],
          yData = [];
        var min = 50;
        data.map(function(a, b) {
          xData.push(a.name);
          if (a.value === 0) {
            yData.push(a.value + min);
          } else {
            yData.push(a.value);
          }
        });
        this.chart5.setOption({
          color: ['#3398DB'],
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'line',
              lineStyle: {
                opacity: 0
              }
            },
            formatter: function(prams) {
              if (prams[0].data === min) {
                return "列位率：0%"
              } else {
                return "列位率：" + prams[0].data + "%"
              }
            }
          },
          grid: {
            left: '0%',
            right: '0%',
            bottom: '5%',
            top: '7%',
            height: '85%',
            containLabel: true,
            z: 22
          },
          xAxis: [{
            type: 'category',
            gridIndex: 0,
            data: xData,
            axisTick: {
              alignWithLabel: true
            },
            axisLine: {
              lineStyle: {
                color: '#0c3b71'
              }
            },
            axisLabel: {
              show: true,
              color: 'rgb(170,170,170)',
              fontSize:16
            }
          }],
          yAxis: [{
            type: 'value',
            gridIndex: 0,
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            min: min,
            max: 100,
            axisLine: {
              lineStyle: {
                color: '#0c3b71'
              }
            },
            axisLabel: {
              color: 'rgb(170,170,170)',
              formatter: '{value} %'
            }
          },
            {
              type: 'value',
              gridIndex: 0,
              min: min,
              max: 100,
              splitNumber: 12,
              splitLine: {
                show: false
              },
              axisLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                show: false
              },
              splitArea: {
                show: true,
                areaStyle: {
                  color: ['rgba(250,250,250,0.0)', 'rgba(250,250,250,0.05)']
                }
              }
            }
          ],
          series: [{
            name: '列位率',
            type: 'bar',
            barWidth: '30%',
            xAxisIndex: 0,
            yAxisIndex: 0,
            itemStyle: {
              normal: {
                barBorderRadius: 30,
                color: new echarts.graphic.LinearGradient(
                  0, 0, 0, 1, [{
                    offset: 0,
                    color: '#00feff'
                  },
                    {
                      offset: 0.5,
                      color: '#027eff'
                    },
                    {
                      offset: 1,
                      color: '#0286ff'
                    }
                  ]
                )
              }
            },
            data: yData,
            zlevel: 11

          },
            {
              name: '背景',
              type: 'bar',
              barWidth: '50%',
              xAxisIndex: 0,
              yAxisIndex: 1,
              barGap: '-135%',
              data: [100, 100, 100, 100, 100, 100, 100],
              itemStyle: {
                normal: {
                  color: 'rgba(255,255,255,0.1)'
                }
              },
              zlevel: 9
            },

          ]
        });
      },
    },
    components: {
      CardContainer,
    },
  }
</script>
<style scoped lang="scss">
  @import '../insp.scss';
  .insp-content{
    width: 100%;
    height: 100%;
    /*background: #00aaff;*/
    .evaluate-top{
      width: 100%;
      height: 300px;
      .evaluate-top-left{
        width: 33%;
        height: 300px;
        float: left;
        .chart1 {
          width: 400px;
          height: 250px;
          background-size: 80% 80%;
          margin: 10px auto 0;
        }
      }
      .evaluate-top-middle{
        width: 33%;
        height: 300px;
        float: left;
        .chart2 {
          width: 400px;
          height: 250px;
          background-size: 80% 80%;
          margin: 10px auto 0;
        }
      }
      .evaluate-top-right{
        width: 33%;
        height: 300px;
        float: left;
        .chart3 {
          width: 400px;
          height: 250px;
          background-size: 80% 80%;
          margin: 10px auto 0;
        }
      }
    }
    .evaluate-bottom{
      width: 100%;
      height: 300px;
      .evaluate-top-left{
        width: 33%;
        height: 300px;
        float: left;
        .chart4 {
          width: 400px;
          height: 300px;
          background-size: 80% 80%;
          margin: 10px auto 0;
        }
      }
      .evaluate-top-right{
        width: 66%;
        height: 300px;
        float: right;
        .chart5 {
          width: 60%;
          margin: 0 auto;
          height: 300px;
          background-size: 80% 80%;
          margin: 10px auto 0;
        }
      }
    }
  }


</style>

